<!DOCTYPE html>
<html>
<head>
	<title>菜单分配</title>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<!-- 所有的 css 资源 -->
	<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet">
	<link href="../../res/sa.css" rel="stylesheet">
	<!-- 所有的 js 资源 -->
	<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	<script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<script src="../../res/sa.js"></script>
	<style>
		body, .el-tree {
			background-color: #F5F5F5;
		}

		.el-tree-node {
			margin: 0.15em 0 !important;
		}

		/* 悬浮时颜色更深一点 */
		.el-tree-node__content:hover {
			background-color: #CFE8FC !important;
		}
	</style>
</head>
<body>
<div class="vue-box">
	<!-- 表格 -->
	<div style="padding: 2em;">
		<div class="c-title">菜单预览</div>
		<!-- 树插件 -->
		<el-tree
				:data="dataList"
				:default-expand-all="true"
				node-key="id"
				ref="tree"
		>
					<span class="custom-tree-node" slot-scope="{ node, data }">
						<span style="color: #2D8CF0;" v-if="data.is_show == undefined || data.is_show == true">{{ data.name }}</span>
						<span style="color: #999;" v-if="data.is_show == false">{{ data.name }} (隐藏)</span>
						<span style="color: #999;" v-if="data.info">&emsp;———— {{data.info}} </span>
					</span>
		</el-tree>
	</div>
</div>
<script src="../../sa-resources/menu-list.js"></script>
<script src="../../sa-resources/admin-util.js"></script>
<script>
    var role_id = sa.$util.getUrlArgs('role_id');
    var app = new Vue({
        el: '.vue-box',
        data: {
            dataList: [],	// 数据集合
        },
        created: function () {
            // 全部
            sa.get('/SysMenu/getList', this.p, function (res) {
                menuList = arrayToTree(menuList);	// 一维转tree
                menuList = refMenuList(menuList);	// 属性处理
                this.dataList = menuList;	// 数据
            }.bind(this));
        }
    })
</script>
</body>
</html>